<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
     <%@include file="/WEB-INF/include/base.jsp"%>
    
</head>

  <body class="login-img3-body">

    <div class="container">

      <form class="login-form" id="loginForm">        
        <div class="login-wrap">
         
            <p class="login-img"><i class="icon_lock_alt"></i></p>
             <span class="" id="msg"  style="color:red;"></span> 
            <div class="input-group ">
              <span class="input-group-addon"><i class="icon_profile"></i></span>
              <input id="user" type="text" name="username" class="form-control" placeholder="用户名" autofocus>
            </div>
            <div class="input-group">
                <span class="input-group-addon"><i class="icon_key_alt"></i></span>
                <input id="pwd" type="password" name="password" class="form-control" placeholder="密码">
            </div>
            
            
            
            <label class="checkbox">
                <input type="checkbox" value="remember-me"> 记住密码
                 <span  class="pull-right"> <a href=""> 忘记密码</a></span> 
            </label>
            <button id="loginBtn" class="btn btn-primary btn-lg btn-block" type="button">登陆</button>
            <!-- <button class="btn btn-info btn-lg btn-block" type="submit">返回</button> -->
        </div>
      </form>
      
      <script type="text/javascript">
      	$(function(){
      		//验证用户名或者密码是否为空
      		function checkUser(){
      			if( $("#user").val() == null || $("#user").val() ==""){
      				$("#msg").text("用户名不能为空");
      				return false;
      			}else{
      				$("#msg").text("");
      				return true;
      			}
      		}
      		function checkPassword(){
      			if( $("#pwd").val() == null || $("#pwd").val() ==""){
					$("#msg").text("密码不能为空");
					return false;
      			}else{
      				$("#msg").text("");
      				return true;
      			}
      		}
      		
      		$("#user").blur(function(){
      			checkUser();
      		});
      		
      		$("#pwd").blur(function(){
      			checkPassword();
      		});
      		
      		$("#loginBtn").click(function(){
          		//验证用户名或者密码是否为空
          		if(!(checkUser() && checkPassword())){
          			return false;
          		}
          		//发的ajax验证
          		$.ajax({
          			url:"${APP_PATH}/checkUser",
          			type:"GET",
          			data:$("#loginForm").serialize(),
          			success:function(result){
          				if(result.code == 100){
          					//验证成功 ，跳到主页面
          					window.location.href="index.jsp";
          				}else{
          					$("#msg").text(result.extend.msg);
          				}
          			}
          		});
          		
          	});
      		
      	})
      
      	
      
      </script>

    </div>


  </body>
</html>
